<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description"content="{{site.description}}">
    <meta name="keywords" content="{{site.keywords}}"/>
    <meta property="og:title" content="{{site.title}}" />
    <meta property="og:description" content="{{site.description}}" />
    <title>{{site.title}}-{{site.name}}</title>
    {{include './common/css.html'}}
</head>

<body class="font-sans bg-gray-50">
   {{include './common/header.html'}}
    <!-- 轮播图区域 -->
    <div class="pt-16">
        <div class="swiper relative h-96 overflow-hidden">
            <!-- 轮播图片 -->
            {{if banner}}
                <div class="swiper-wrapper flex transition-transform duration-500">
                {{each banner}}
                    <div class="swiper-slide min-w-full h-96 bg-cover bg-center relative"
                        style="background-image: url('{{$value.imgUrl}}')">
                       {{if $value.content}}
                        <div class="absolute inset-0 bg-black bg-opacity-10 flex items-center justify-center">
                            <div class="text-center text-white px-6">
                              {{@ $value.content}}
                            </div>
                        </div>
                        {{/if}}
                    </div>   
                    {{/each}}
                </div>
            {{/if}}
             
            <div class="swiper-pagination"></div>
            <div class="swiper-button-next bg-white bg-opacity-50 hover:bg-opacity-75 rounded-full p-2 focus:outline-none"><i class="fas fa-chevron-right text-xl"></i></div>
            <div class="swiper-button-prev bg-white bg-opacity-50 hover:bg-opacity-75 rounded-full p-2 focus:outline-none"><i class="fas fa-chevron-left text-xl"></i></div>
        </div>
    </div>

    <!-- 公司简介概览区 -->
    <section class="py-12 bg-white">
        <div class="container mx-auto px-4">
            <h2 class="text-3xl font-bold text-center mb-8">{{frag['home-company-title']}}</h2>
            <div class="flex flex-col md:flex-row gap-8 items-center">
                    {{@ frag['home-company-txt']}}
                <div class="md:w-2/4">
                    {{@ frag['home-company-pic']}}
                </div>
            </div>
        </div>
    </section>

    <!-- 主体技术展示区 -->
    <section class="py-12 bg-gray-50">
        <div class="container mx-auto px-4">
            {{@ frag["home-core-title"]}}
            <!-- <h2 class="text-3xl font-bold text-center mb-8">核心业务概览</h2>
            <p class="text-gray-600 max-w-3xl mx-auto mb-8">我们提供全方位的环保解决方案，从水污染治理到生物质能源开发，致力于为客户创造绿色价值。</p> -->
            <div class="grid md:grid-cols-3 gap-8">
                <!-- 污水处理 -->
                <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow">
                    {{@ frag["home-core-water"]}}
                    <!-- <img src="{{static_url}}imgs/001.jpg" alt="污水处理" class="w-full h-48 object-cover">
                    <div class="p-6">
                        <h3 class="text-xl font-semibold mb-2">污水处理技术</h3>
                        <p class="text-gray-600 mb-4">采用先进的生物处理工艺，实现污水高效净化。</p>
                        <a href="wastewater.html" class="text-blue-600 font-medium">了解更多 <i
                                class="fas fa-arrow-right ml-1"></i></a>
                    </div> -->
                </div>

                <!-- 固废处理 -->
                <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow">
                    {{@ frag["home-core-gt"]}}
                    <!-- <img src="{{static_url}}imgs/002.jpg" alt="固废处理" class="w-full h-48 object-cover">
                    <div class="p-6">
                        <h3 class="text-xl font-semibold mb-2">固废处理技术</h3>
                        <p class="text-gray-600 mb-4">创新性的固废资源化利用技术，实现减量化、无害化。</p>
                        <a href="solidwaste.html" class="text-blue-600 font-medium">了解更多 <i
                                class="fas fa-arrow-right ml-1"></i></a>
                    </div> -->
                </div>

                <!-- 废气处理 -->
                <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow">
                    {{@ frag["home-core-fq"]}}
                    <!-- <img src="{{static_url}}imgs/003.jpg" alt="废气处理" class="w-full h-48 object-cover">
                    <div class="p-6">
                        <h3 class="text-xl font-semibold mb-2">废气处理技术</h3>
                        <p class="text-gray-600 mb-4">高效的废气净化系统，确保排放达标。</p>
                        <a href="exhaust.html" class="text-blue-600 font-medium">了解更多 <i
                                class="fas fa-arrow-right ml-1"></i></a>
                    </div> -->
                </div>
            </div>
        </div>
    </section>

    <section class="py-12 bg-light-50">
        <div class="container mx-auto px-4">
            <div class="text-center mb-12">
                <h2 class="text-3xl font-bold text-primary mb-4">最新动态</h2>
                <p class="text-gray-600 max-w-2xl mx-auto">了解我们的最新项目进展、技术创新和行业动态</p>
            </div>
            {{if article?.news?.list.length > 0}}
            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                {{each article?.news?.list}}
                <div
                    class="bg-white rounded-lg shadow-md overflow-hidden transition-all duration-300 hover:shadow-lg hover:-translate-y-1">
                    <a href="{{$value.path}}/article-{{$value.id}}.html">
                        <img src="{{$value.img}}" alt="污水处理项目" class="w-full h-48 object-cover">
                    </a>
                    <div class="p-6">
                        <div class="flex items-center text-gray-500 text-sm mb-2">
                            <i class="far fa-calendar-alt mr-2"></i>
                            <span>{{ dateFormat($value.createdAt, 'YYYY-MM-DD') }}</span>
                        </div>
                        <h3
                            class="text-xl font-bold mb-3 text-primary hover:text-accent transition-colors duration-300">
                            <a href="{{$value.path}}/article-{{$value.id}}.html">{{$value.title}}</a>
                        </h3>
                        <!-- <p class="text-gray-600 mb-4"> -->
                            {{@ $value.description}}
                        <!-- </p> -->
                        <a href="{{$value.path}}/article-{{$value.id}}.html"
                            class="text-blue-600 font-medium text-primary hover:text-accent transition-colors duration-300 flex items-center">
                            <span>阅读更多</span>
                            <i class="fas fa-arrow-right ml-2"></i>
                        </a>
                    </div>
                </div>
                {{/each}}
            </div>
            {{/if}}
            <div class="text-center mt-10">
                <a href="/news/index.html"
                    class="inline-block bg-white text-black border border-primary text-primary hover:bg-primary hover:text-blue-600 px-6 py-3 rounded-full transition-all duration-300">查看更多</a>
            </div>
        </div>
    </section>

    <!-- 页脚 -->
    {{include './common/footer.html'}}
    {{include './common/js.html'}}
</body>

</html>